<template>
  <van-nav-bar :title="title" :left-arrow="leftArrow" :border="border" :fixed="false" :placeholder="false"
    :safe-area-inset-top="false" @click-left="goback" @click-right="$emit('clickRight')">
    <template #right>
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
defineProps({
  title: {
    type: String,
    default: "",
  },
  leftArrow: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: true,
  },
})
defineEmits(["clickRight"]);
const router = useRouter(); //路由
const goback = () => {
  router.go(-1);
};
</script>
<style lang="scss">
.van-nav-bar {
  width: 100%;
  position: sticky !important;
  top: 0;
  background: #ffffff !important;
}

/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .van-nav-bar {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-top: 40px;
  }
}

/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  .van-nav-bar {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-top: 40px;
  }
}

/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .van-nav-bar {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-top: 40px;
  }
}

/* iphone 12 pro */
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
  .van-nav-bar {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-top: 40px;
    // height: calc(50px + constant(safe-area-inset-top));
    // height: calc(50px + env(safe-area-inset-top));
  }
}
</style>